<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Iframe Page </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet"> 
	
	<link href=.../../statics/plugins/bootstrap3-dialog/css/bootstrap-dialog.min.css" rel="stylesheet"> 
	
	<!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet"> 
  </head>

  <body class="nav-md" style="height: 400px;">
    <div class="container body">
      <div class="main_container">
         
        <!-- page content -->
        <div class="modalbody" role="main" >
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Iframe Page</h3>
              </div>
			  
              <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                              <button class="btn btn-default" type="button">Go!</button>
                          </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_content">
					<h3><a href="http://www.runoob.com/jquery/jquery-plugin-validate.html">>>jQuery Validate 教程</a></h3>
                    <form class="form-horizontal form-label-left">
		
                      <span class="section">Personal Info</span>

                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="both name(s) e.g Jon Doe" required="required" type="text">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Email <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirm Email <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                      <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="number">Number <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                          <input type="number" id="number" name="number" required="required" data-validate-minmax="10,100" class="form-control col-md-7 col-xs-12">
                        </div>
                      </div>
                       
                    </form>
					 <div class="ln_solid"></div>
                      <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                          <button id="btnOk"  class="btn btn-primary">Submit</button>
                          <button id="btnCancel" class="btn btn-danger">Cancel</button>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->
 
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>    
	
	<script src=.../../statics/plugins/bootstrap3-dialog/js/bootstrap-dialog.min.js"></script>   
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	
	<script>
		$(function(){
			$("#btnCancel").on("click", function(){  
				//将标志设置为null
				sys.dialog.setData("success", null);
				//关闭iframe弹出页面
               	sys.closeRemote();
			})
			$("#btnOk").on("click", function(){  
				//在此设置一个变量，在父页面可获取到
				sys.dialog.setData("success", 1);
				//关闭iframe弹出页面
               	sys.closeRemote();
			})
		})
	</script>
	
  </body>
</html>